<template>
  <div class="cockpit-wrap">
    <div class="left-wrap">
      <div class="clue-wrap">
        <div class="title-desc">线索产业分布</div>
        <div class="content-wrap">
          <cluePart 
            :times="times"
          />
        </div>
      </div>

      <div class="class-wrap">
        <div class="title-desc">专班项目分布</div>
        <div class="content-wrap">
          <classPro 
            :times="times"
          />
        </div>
      </div>
      <div class="assessment-wrap">
        <div class="title-desc">当前范围考核</div>
        <div class="content-wrap">
          <assessmentFour 
            :times="times"
          />
        </div>
      </div>
    </div>

    <div class="center-wrap">
      <div class="map-wrap">
        <mapImg 
          :times="times"
        />
      </div>
      <div class="money-wrap">
        <div class="title-desc">当前投资额</div>
        <div class="content">
          <nowMoney 
            :times="times"
          />
        </div>
      </div>
    </div>

    <div class="right-wrap">
      <div class="total-wrap">
        <div class="title-desc">累计投资额</div>
        <div class="content">
          <div class="invest-wrap">
            <investColumn 
              :times="times"
            />
          </div>
          <div class="ring">
            <twoRing 
              :times="times"
            />
          </div>
        </div>
      </div>
      <div class="park-wrap">
        <div class="title-desc">街道统计</div>
        <div class="content-wrap">
          <parkNum 
            :times="times"
          />
        </div>
      </div>
    </div>

    <div class="date-wrap">
      <el-date-picker
        v-model="times"
        type="monthrange"
        range-separator="至"
        :clearable="false"
        value-format="yyyy-MM"
        popper-class="big-date-select-whd"
        start-placeholder="开始月份"
        end-placeholder="结束月份">
    </el-date-picker>
    </div>
  </div>
</template>

<script>
import CluePart from '@/views/investment/components/cluePart.vue'
import ClassPro from '@/views/investment/components/classPro.vue'
import AssessmentFour from '@/views/investment/components/assessmentFour.vue'
import NowMoney from '@/views/investment/components/nowMoney.vue'
import ParkNum from '@/views/investment/components/parkNum.vue'
import InvestColumn from '@/views/investment/components/investColumn.vue'
import TwoRing from '@/views/investment/components/twoRing.vue'
import MapImg from '@/views/investment/components/mapImg.vue'

export default {
  name: "cockpit",
  data() {
    return {
      times: []
    }
  },
  created() {
    const end = new Date()
    const start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
    this.times = [start, end]
  },
  mounted() {
    window.localStorage.removeItem('cockpitFlag')
  },
  components: {
    CluePart,
    ClassPro,
    AssessmentFour,
    NowMoney,
    ParkNum,
    InvestColumn,
    TwoRing,
    MapImg
  }
}
</script>

<style lang="scss">
.date-wrap {
  .el-date-editor {
    width: 10.938vw;
    height: 1.771vw;
    line-height: 1.771vw;
    font-size: 0.729vw;
    background: url('../../../assets/cockpit/date-bg.png') no-repeat;
    background-size: 100% 100%;
    color: #fff;
  }
  .el-date-editor .el-icon-date {
    display: none;
  }
  .el-range-editor--medium .el-range-input {
    background: transparent;
    color: #FFFFFF;
    font-size: 0.729vw;
  }
  .el-range-separator {
    color: #fff;
    height: 1.771vw;
    line-height: 1.771vw;
    font-size: 0.729vw;
  }
  .el-range-editor.is-active, .el-range-editor.is-active:hover{
    border-color: transparent;
  }
  .el-range-editor--medium .el-range__close-icon, .el-range-editor--medium .el-range__icon {
    height: 1.771vw;
    line-height: 1.771vw;
  }
  .el-input__inner, .el-date-editor .el-range-input {
    color: #fff;
    &::placeholder {
        color: #fff;
    }

    &::-webkit-input-placeholder {
        /* WebKit browsers 适配谷歌 */
        color: #fff;
    }

    &:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 适配火狐 */
        color: #fff;
    }

    &::-moz-placeholder {
        /* Mozilla Firefox 19+ 适配火狐 */
        color: #fff;
    }

    &:-ms-input-placeholder {
        /* Internet Explorer 10+  适配ie*/
        color: #fff;
    }
  }
}
.big-date-select-whd {
  background: url('../../../assets/cockpit/date-select-bg.png') no-repeat;
  background-size: 100% 100%;
  border: 0;
  color: #fff;
  .el-date-range-picker__content.is-left {
    border: 0;
  }
  .popper__arrow,
  .popper__arrow:after {
    display: none !important;
  }
  .el-icon-d-arrow-left:before,
  .el-icon-d-arrow-right:before {
    color: #fff;
  }
  .el-month-table td .cell {
    color: #fff;
  }
  .el-month-table td.in-range div, .el-month-table td.in-range div:hover {
    background: #2B90E0;
  }
  .el-month-table td.start-date div,
  .el-month-table td.end-date div {
    border-radius: 0;
  }
  .el-month-table td.end-date .cell, .el-month-table td.start-date .cell {
    background: #2B90E0;
  }
}
</style>
<style lang="scss" scoped>
.cockpit-wrap {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 4.427vw 3.75vw 0;
  width: 100vw;
  min-height: 100vh;
  background: url('../../../assets/cockpit/bg.png') no-repeat;
  background-size: 100% 100%;
  color: #9BB9DD;
  font-size: 0.729vw;

  .date-wrap {
    position: absolute;
    right: 3.49vw;
    top: 0.885vw;
  }
  .left-wrap {
    width: 23.177vw;
    height: 100%;
  }
  .right-wrap {
    width: 23.177vw;
    height: 100%;
  }
  .center-wrap {
    width: 42.396vw;
    height: 100%;
  }

  .content-wrap {
    align-items: center;
    height: 12.76vw;
    padding: 0 14px;
  }
  .title-desc {
    font-size: 1.042vw;
    color: #fff;
    padding-left: 2.188vw;
    user-select: none;
    line-height: 1em;
    margin-bottom: 0.833vw;
  }
  .clue-wrap {
    width: 100%;
    height: 15.469vw;
    background: url('../../../assets/cockpit/clue-bg.png') no-repeat;
    background-size: 100% 100%;
    margin-bottom: 1.302vw;
  }
  .class-wrap {
    width: 100%;
    height: 15.469vw;
    background: url('../../../assets/cockpit/clue-bg.png') no-repeat;
    background-size: 100% 100%;
    margin-bottom: 1.302vw;
  }
  .assessment-wrap {
    width: 100%;
    height: 15.469vw;
    background: url('../../../assets/cockpit/clue-bg.png') no-repeat;
    background-size: 100% 100%;
    margin-bottom: 1.302vw;
  }

  .map-wrap {
    width: 100%;
    height: 33.542vw;
  }
  .money-wrap {
    width: 100%;
    height: 15.469vw;
    background: url('../../../assets/cockpit/money-bg.png') no-repeat;
    background-size: 100% 100%;
  }
  .total-wrap {
    width: 100%;
    height: 32.24vw;
    margin-bottom: 1.302vw;
    background: url('../../../assets/cockpit/total-bg.png') no-repeat;
    background-size: 100% 100%;
    .invest-wrap {
      padding: 1.563vw 1.042vw;
      height: 15.625vw;
    }
    .ring {
      height: 13.021vw;
    }
  }
  .park-wrap {
    width: 100%;
    height: 15.469vw;
    background: url('../../../assets/cockpit/clue-bg.png') no-repeat;
    background-size: 100% 100%;
  }
}
</style>
